<template>
  <div>
    <div class="toolbox">
      <button @click="setItemType('地')">地</button>
      <button @click="setItemType('水坑')">水</button>
      <button @click="setItemType('电厂')">小电</button>
      <button @click="setItemType('核电')">大电</button>
      <button @click="setItemType('房3')">房3</button>
      <button @click="setItemType('房2')">房2</button>
      <button @click="setItemType('房1')">房1</button>
      <button @click="setItemType('农')">农</button>
      <button @click="setItemType('路')">路</button>
    </div>
    <div class="ground">
      <div class="item" v-for="item in grounds" :style="{backgroundColor:item.color}" @click="clickGround(item)">
        <div>{{item.type}}:{{item.x}}-{{item.y}}</div>
        <div class="info">          
          <!-- <span v-show="item.elec>0">电:{{item.elec}}</span>
          <span v-show="item.water>0">水:{{item.water}}</span>
          <span v-show="item.wind>0">风:{{item.wind}}</span>
          <span v-show="item.shadow>0">影:{{item.shadow}}</span>
          <span v-show="item.polution>0">污染:{{item.polution}}</span> -->

          <span :class="item.elec>0?'elecText':''">电:{{item.elec}}</span>
          <span :class="item.water>0?'waterText':''">水:{{item.water}}</span>
          <span :class="item.wind>0?'windText':''">风:{{item.wind}}</span>
          <span :class="item.shadow>0?'shadowText':''">影:{{item.shadow}}</span>
          <span :class="item.polution>0?'polutionText':''">污染:{{item.polution}}</span>
        </div>        
      </div>
    </div>
  </div>
</template>

<script>

var allConf={
  "水坑":[
    {type:"water",values:{x:2,y:2,v:2}}
  ],
  "电厂":[
    {type:"elec",values:{x:3,y:3,v:3}},
    {type:"shadow",values:{x:3,y:3,v:3}},
    {type:"wind",values:{x:3,y:3,v:3}},
    {type:"polution",values:{x:3,y:3,v:3}},
  ],
  "房3":[
    {type:"shadow",values:{x:3,y:3,v:3}},
    {type:"wind",values:{x:3,y:3,v:3}},
  ],
  "房2":[
    {type:"shadow",values:{x:2,y:2,v:2}},
    {type:"wind",values:{x:2,y:2,v:2}},
  ],
  "房1":[
    {type:"shadow",values:{x:1,y:1,v:1}},
    {type:"wind",values:{x:1,y:1,v:1}},
  ],
}

var buildingColors={
  "水坑":"lightskyblue",
  "电厂":"orange",
  "核电":"red",
  "房3":"Darkorange",
  "房2":"DarkGoldenRod",
  "房1":"DarkKhaki",
  "路":"darkgrey",
  "农":"LimeGreen"
}

export default {
  name:"townstar",
  data(){    
    return {
      selectedItem:null,
      grounds:[]
    }
  },
  created(){
    // console.log('created')
    this.initGrounds()
  },
  methods:{
    computeAll(){
      // console.log('compute all')
      for (var i in this.grounds){
        var g=this.grounds[i]
        g.water=0
        g.elec=0
        g.wind=0
        g.shadow=0
        g.polution=0
      }
      for (var i in this.grounds){
        var g=this.grounds[i]        
        this.computeOne(g)
      }
    },
    computeOne(item){
      var conf=allConf[item.type]
      if(conf==null) return
      // console.log(conf)
      for (var i in conf){
        var eff=conf[i]        
        this.computeEff(item,eff)
      }
    },
    computeEff(item,eff){      
      for (var i=-eff.values.x;i<=eff.values.x;i++){
        for (var j=-eff.values.y;j<=eff.values.y;j++){          
          if((Math.abs(i)==eff.values.x && Math.abs(j)==eff.values.y) || (i==0 && j==0)) continue;
          

          var findx=item.x+i
          var findy=item.y+j
          var finditem=this.findItemByXY(findx,findy)
          if(finditem!=null){
            var add=eff.values.v
            add-=(Math.max(Math.abs(i),Math.abs(j))-1)
            // add-=(Math.max(0,Math.abs(i)-1))
            // add-=(Math.max(0,Math.abs(j)-1))
            console.log(i,j,add)
            finditem[eff.type]+=add
          }
        }
      }
    },
    findItemByXY(x,y){
      for (var i in this.grounds){
        var g=this.grounds[i]
        console.log('find '+x+" "+y)
        if(g.x==x && g.y==y) {
          console.log('found')
          return g
        }
      }
      console.log("not found")
      return null
    },
    setItemType(type){
      if(this.selectedItem==null) return
      console.log('set item to '+type)
      this.selectedItem.type=type
      this.computeAll()
    },
    clickGround(item){
      // console.log('click'+item.x+'-'+item.y)
      this.selectedItem=item
      for (var i in this.grounds){
        var g=this.grounds[i]
        if(g.x==item.x && g.y==item.y){
          g.selected=true
          g.color='lightgreen'
        } 
        else{
          g.selected=false
          g.color=buildingColors[g.type]??"white"
        }
      }
    },
    initGrounds(){      
      for (var i=0;i<16;i++){
        for (var j=0;j<16;j++){
          var g={
            x:j,
            y:i,
            type:'地',
            color:'white',
            water:0,
            polution:0,
            shadow:0,
            wind:0,
            elec:0,
            selected:false
          }
          this.grounds.push(g)
        }
      }      
    }
  }
}
</script>

<style scoped>
  div,span {
    padding: 0;
    margin: 0;
  }
  .toolbox{
    width:100%;
    /* position: absolute; */
    /* float: left; */
    display: block;
    border: 1px solid red;
  }
  .ground {
    width:1650px;
    display: block;
    /* float: left; */
    /* position: absolute; */
    border: 1px solid blue;
  }
  .item{
    display: inline-block;
    width:100px;
    height:100px;
    border: 1px solid grey;
  }
  .choose{
    background-color: lightskyblue;    
  }

  .info {
    color:lightgrey;
    font-size: 12px;
  }
  .info span{
    display: inline-block;
    margin: 2px;
    padding: 1px;
  }
  .elecText{
    color:white;
    background-color: purple;
  }
  .waterText{
    color:white;
    background-color: darkcyan;
  }
  .windText{
    color:white;
    background-color:cyan
  }
  .shadowText{
    color:white;
    background-color:dimgrey
  }
  .polutionText{
    color:white;
    background-color:peru
  }
</style>